<template>
  <el-dialog title="建档率统计结果" :visible.sync="visible" :close-on-click-modal='false' fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-button class="miui-dialog-print-btn" @click="exportHandle" :loading="isExport">导出</el-button>
    <el-table :data="tableData" v-loading="loading" style="width: 100%">
      <el-table-column prop="fullName" label="班级名称" width="360"></el-table-column>
      <el-table-column label="近视监测">
        <el-table-column prop="studentNumber" label="应到人数">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailHandle(scope.row,'should')">{{scope.row.studentNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="checkDateActualNumber" label="实际人数">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailHandle(scope.row,'checkActual')">{{scope.row.checkDateActualNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="notCheckNumber" label="未到人数">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailHandle(scope.row,'checkNot')">{{scope.row.notCheckNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="checkRate" label="百分比"></el-table-column>
      </el-table-column>
      <el-table-column label="屈光发育档案">
        <el-table-column prop="studentNumber" label="应到人数">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailHandle(scope.row,'should')">{{scope.row.studentNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="optometryActualNumber" label="实际人数">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailHandle(scope.row,'optoActual')">{{scope.row.optometryActualNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="notOptometryNumber" label="未到人数">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailHandle(scope.row,'optoNot')">{{scope.row.notOptometryNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="optometryRate" label="百分比"></el-table-column>
      </el-table-column>
    </el-table>
    <count-detail v-if="detailVisible" ref="detailDialog"></count-detail>
  </el-dialog>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  import { getStudentFilingRate, getCheckExport } from '@/api/pvm/filingRate'

  import CountDetail from './CountDetail'

  export default {
    data() {
      return {
        visible: false,
        detailVisible: false,
        isExport: false,
        loading: false,
        params: {},
        tableData: []
      }
    },
    components: {
      CountDetail
    },
    methods: {
      init(data) {
        this.visible = true;
        this.params = data
        this.tableData = []
        this.$nextTick(() => {
          this.checkFilResult(data)
        })
      },
      // 查询统计结果
      checkFilResult(data){
        this.loading = true
        getStudentFilingRate(this.params).then(response => {
          if(response.data.code == '0'){
            let resultData = response.data.data
            resultData.forEach((item,index) => {
              resultData[index].notCheckNumber = item.studentNumber - item.checkDateActualNumber
              resultData[index].notOptometryNumber = item.studentNumber - item.optometryActualNumber
              resultData[index].checkRate = ((item.checkDateActualNumber / item.studentNumber)*100).toFixed()
              resultData[index].optometryRate = ((item.optometryActualNumber / item.studentNumber)*100).toFixed()
            })
            this.tableData = resultData
          }else{
            this.$message.error(response.data.mdg)
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      // 查看详情
      checkDetailHandle(data,type){
        this.detailVisible = true
        this.params.schoolId = data.schoolId
        this.params.gradeId = data.gradeId
        this.params.classId = data.classId
        this.$nextTick(() => {
          this.$refs.detailDialog.init(this.params,type)
        })
      },
      // 导出
      exportHandle() {
        this.isExport = true
        getCheckExport(this.params).then(response => {

            this.isExport = false
            var blob = new Blob([response.data], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            });
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function(e) {
              var a = document.createElement('a');
              a.download = "建档率统计结果.xlsx";
              a.href = URL.createObjectURL(blob);
              a.click();
            }
        }).catch(() => {
          this.isExport = false
        })
      },
    }
  }
</script>
